<template>
    <div class="list-item">
        <a 
        class="left" 
        :href="data[props.href]"
        target="_blank"
        @click.prevent="clickHandler(data)"
        >
            <div 
            v-if="data[props.icon]"
            class="icon"
            >
                <img 
                    src="/images/icon/loading.gif"
                    v-lazy="data[props.icon]" 
                    :alt="data[props.title]"
                />
            </div>

            <div class="title">
                <el-tooltip effect="light" :content="data[props.title]" placement="top-end">
                    <div class="text">
                        {{data[props.title]}}
                    </div>
                </el-tooltip>

                <div 
                v-if="data[props.desc]"
                class="desc"
                >
                    {{data[props.desc]}}
                </div>
            </div>
        </a>

        <div 
        v-if="!isFile"
        class="right"
        >
            <div class="btn btn-add">
                <el-tooltip effect="light" content="添加到我的桌面" placement="top-end">
                    <i 
                        v-if="/add/.test(layout)"
                        class="el-icon-circle-plus btn-add"
                        @click="addHandler"
                    ></i>
                </el-tooltip>
            </div>

            <div class="btn btn-remove">
                <el-tooltip effect="light" content="从我的桌面移除" placement="top-end">
                    <i 
                        v-if="/remove/.test(layout)"
                        class="el-icon-remove btn-remove"
                        @click="removeHandler"
                    ></i>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

import appNode from '@js/app-node';
import CONFIG_PROJECT from '@config/project';

export default {
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        props: {
            type: Object,
            default: () => ({
                title: 'name',
                icon: 'imgurl',
                href: 'linkurl',
                desc: 'describe',
            }),
        },
        layout: {
            type: String,
            default: 'add,remove',
        },
    },
    computed: {
        isFile() {
            var url = this.data[this.props.href];

            return /(zip|exe|rar|7z)$/.test(url)
        },
    },
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
        checkIsLogin() {
            const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');

            if (!SERIAL_CODE) {
                this.showLogin();

                return false;
            }

            return true;
        },
        addHandler() {
            if (!this.checkIsLogin()) {
                return;
            }

            this.$post(`${this.$store.state.api.webUrl}/index/adddesk.json`, {
                guid: this.data.guid,
            }, data => {
                this.$emit('update');

                showMsg('添加成功', 'success');
            });
        },
        removeHandler() {
            if (!this.checkIsLogin()) {
                return;
            }

            showConfirm('从我的桌面移除后，还可以在该导航原位置进行访问', 'info', () => {
                this.$post(`${this.$store.state.api.webUrl}/index/deldesk.json`, {
                    guid: this.data.guid,
                }, data => {
                    this.$emit('update');
                });
            });
        },
        clickHandler(url) {
            var url = this.data[this.props.href],
                title = this.data[this.props.title];

            // 记录点击次数
            this.$get(`${this.$store.state.api.webUrl}/index/click.json`, {
                guid: this.data.guid,
            }, () => {

            });

            if (!this.isFile) {
                if (window.electronApi) {
                    // 客户端直接打开界面
                    window.open(url);
                } else {
                    // web端打开中间页
                    window.open(`/jump/out?link=${url}`);
                }

                return;
            }

            appNode.downloader(url, title);

            if (!window.electronApi) {
                // 非客户端环境，下载客户端安装包
                var downloadUrl = this.getClientDownloadUrl();
                
                appNode.downloader(downloadUrl, CONFIG_PROJECT.downloadUrl.exe.filename);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .list-item{
        display: flex;
        align-items: center;
        height: 45px;

        .left{
            display: flex;
            flex: 1;
            overflow: hidden;
            height: 100%;

            .icon{
                display: flex;
                align-items: center;
                margin-right: 10px;

                img{
                    display: block;
                    width: 25px;
                    height: 25px;
                }
            }

            .title{
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;
                overflow: hidden;
                font-size: 14px;
                color: #2d2d2d;
                font-weight: bold;

                .text{
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .desc{
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 12px;
                    color: #C0C4CC;
                }
            }
        }

        .right{
            display: none;

            .btn{
                font-size: 16px;
                cursor: pointer;

                & + .btn{
                    margin-left: 6px;
                }
            }

            .btn-add{
                color: $successColor;
            }

            .btn-remove{
                color: $dangerColor;
            }
        }

        &:hover{
            .right{
                display: flex;
            }
        }
    }
</style>